Making the div 100% height

Question

I need to make the pink div 100% browser height, height: 100vh doesn't work right, there's a scrollbar so it's like 105%...

html,
body {
 width: 100%;
 height: 100%;
 color: white;
 background-color: #002B5A;
 margin: 0;
 padding: 0;
 direction: rtl;
}
#right {} #left {
 min-height: 100%;
 height: 100%;
 background-color: #CA1F4B;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="right">
 right
 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-offset-1" id="left">
 left
 </div>
</div>

Check out this Bootply

• Thomas Andreè Wang: Add overflow hidden. Maybe

Answer 1

You need to set #right's height to 100%.

#right {
 height:100%;
}

Because #left is a child of the #right element, it is only being 100% of the parent's height. As #right is only set to height:auto; by default, it wont be 100%.

html,
body {
 width: 100%;
 height: 100%;
 color: white;
 background-color: #002B5A;
 margin: 0;
 padding: 0;
 direction: rtl;
}
#right { 
 height:100%;
}
#left {
 min-height: 100%;
 height: 100%;
 background-color: #CA1F4B;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="right">
 right
 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-offset-1" id="left">
 left
 </div>
</div>

(Look at snippet in full screen)

Bootply

• Albzi: No worries glad I could help! @odedta

Answer 2

Try removing the min-height and changing the height to vmax, vmin or vh.

#left {
 height: 100vh;
 background-color: #CA1F4B;
}

http://www.bootply.com/dGavhuGt6g#